<template>
  <div class="page">
    <h2>      <a @click="back" class="btnBack">返回</a>
      订单列表</h2>
    <div>
      <ul class="ulProList">
        <li v-for="item in list" :key="item.id" @click="goDetail(item.id)">
          <div class="number"><span class="date">生成时间：{{item.create_date}}</span>订单号：{{item.id}}</div>
          <div class="image"><img :src="item.p_cover" alt="图片" /></div>
          <div class="info"><h4>{{item.p_title}}</h4><p>价格：{{item.o_price}}元</p></div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
import router from '../router'
import Api from '../api'

export default {
  props: {
    message: String
  },
  name: 'HelloWorld-',
  data () {
    return {
      rootApi: 'http://localhost:4000/',
      list:[]
    }
  },
  methods: {
    back(){
      router.go(-1);
    },
    goDetail(id){
      router.push('/order/'+id);
    },
    getOrderData() {
      Api.getOrderList({
        data: '',
        success: (d) => {
          this.list = d.data;
        },
        fail:()=>{
          console.log(d);
        }
      })

    }
  },
  mounted: function () {
    this.getOrderData();
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" rel="stylesheet/less">
  .btnBack{float: left; font-size: 14px; line-height:30px;}
  .ulProList{
    clear: both;list-style: none;margin: 0;padding: 0; text-align: left; font-size: 12px;
    li{clear: both;list-style: none;margin: 0;padding: 0;
      .image{float: left;width: 100px;height: 100px;
        img{display: block;width: 90px;height: 90px; background: #999;}
      }
      .info{
        h4{font-size: 12px;}
      }
      .date{float: right;}
    }
  }
</style>
